<template>
    <div class="demo-card-square mdl-card mdl-shadow--2dp animate__animated animate__fadeIn">
        <div class="mdl-card__title mdl-card--expand">
            <h2 class="mdl-card__title-text" style="color:#78132B;">{{ this.commodity.name }}</h2>
        </div>
        <div class="mdl-card__supporting-text">
            单价:{{ this.commodity.price }} CNY <br>
            商家:{{ this.commodity.merchant }}
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
                @click="buyOnclick(this.commodity)">
                购买
            </a>
        </div>
    </div>
</template>

<script>
import 'animate.css';
export default {
    setup() {
        return {}
    },
    props: [
        "commodity",
        "buyOnclick"
    ],
    methods: {
    }
}
</script>

<style lang="scss" scoped>
.demo-card-square.mdl-card {
    width: 240px;
    height: 320px;
}

.demo-card-square>.mdl-card__title {
    color: #fff;
    background:
        url('../assets/img/shop.jpg') bottom right 50% no-repeat #46B6AC;
    background-size: 480px;
}

.demo-card-square:hover {
    filter: 30px;
}
</style>